<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100%;
				height: 5000px;

			}

			#btn {
				display: none;
				top: 300px;
				position: fixed;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<div id="">
			<button id="btn" type="button">按钮</button>
		</div>
		<script type="text/javascript">
			window.onscroll = function() {
				//判断滚动条的距离  大于1000的时候将按钮显示出来，小于1000让按钮隐藏
				if (scrollY >= 1000) {
					btn.style.display = 'block';
				}else{
					btn.style.display = 'none';
				}

			}
			//定义全局变量 能够在我们点击按钮是先清除 上一次的定时器
			var timer;
			btn.onclick=function(){
				
				//
				clearInterval(timer);
				//如果在函数里面定义局部变量 那么每点一次按钮就会另外开辟
				//一个地址空间，里面的局部变量只能这个空间自己使用
				//下一次点击的时候 另一个空间地址，不能访问上次空间里的变量
				timer=setInterval(function(){
					//当滚动条回到顶部的时候清除定时器
					if(scrollY<=0){
						
						clearInterval(timer);
					}
					
					//让滚动距离在原来的基础上-100
					scrollTo({top:scrollY-100});
					
					
					
				},100)
				
				
				
			}
		</script>

	</body>
</html>
